<template>
  <div>
      <header class="head">
           <router-link to="/jlcy" tag="span" class="s"><返回</router-link>
          <p>地址管理</p>
      </header>
    <div class="tj">
        添加地址:
    </div>
    <div class="li">
        <span class="s">收货人:</span>
        <input type="text" name="" class="ipt">
    </div>
    <div class="lii">
        <span class="s">联系方式:</span>
        <input type="text" name="" class="ipt">
    </div>
    <div class="sf">
        <span class="ss">省份:</span>
        <select>
            <option>北京市</option>
            <option>山西省</option>
            <option>山东省</option>
            <option>河南省</option>
            <option>河北省</option>
            <option>贵州省</option>
            <option>海南</option>
            <option>黑龙江</option>
        </select>
         <select>
            <option>北京市</option>
            <option>太原市</option>
            <option>济宁市</option>
            <option>洛阳市</option>
            <option>邯郸市</option>
            <option>贵州省</option>
            <option>三亚</option>
            <option>东北</option>
        </select>
         <select>
            <option>海淀区</option>
            <option>运城</option>
            <option>青岛</option>
            <option>驻马店</option>
            <option>石家庄</option>
        </select>
    </div>
    <div class="li">
        <span class="s">邮编:</span>
        <input type="text" name="" class="ipt">
    </div>
    <div class="li-1">
        <span class="sss">街道地址:</span>
        <input type="text" name="" class="ippt">
    </div>
    <div class="ti">
        <button class="btn">提交</button>
    </div>
  </div>
</template>
<script>
export default {
    
}
</script>
<style lang="less" scoped>
    .px2rem(@name, @px) {
        @{name}: @px / 75 * 1rem;
    }
.head{
    position: relative;
    width: 100%;
    .px2rem(height,50);
    background: red;
    display: flex;
    // justify-content: center;
    p{ 
       width: 100%;
        text-align: center;
        .px2rem(font-size, 30);
        color: #fff;
        font-family: '楷体';
        line-height: 1.8;
    }
    span{
        position: absolute;
        top: 0;
        left: 0;
        .px2rem(width, 100);
        .px2rem(height, 50);
        .px2rem(font-size, 20);
        text-align: center;
        line-height: 2.6;
    }
}
.tj{
    margin-top: 30px;
    margin-left: 20px;
    .px2rem(font-size, 30);
    color: pink;
}
.li{
    display: flex;
    justify-content: center;
    margin-top: 25px;
    .s{
        .px2rem(font-size, 20);
        margin-top: 4px;
        margin-right: 5px;
    }
}
.lii{
    display: flex;
    justify-content: center;
    margin-top: 25px;
    margin-right: 14px;
    .s{
        .px2rem(font-size, 20);
        margin-top: 4px;
        margin-right: 5px;
    }
}
.ipt{
    border-radius: 5px;
}
.sf{
    display: flex;
    justify-content: center;
    margin-top: 25px;
    .ss{
        .px2rem(font-size, 20);
        margin-top: 4px;
        margin-right: 5px;  
    }
}
.li-1{
     display: flex;
    justify-content: center;
    margin-top: 25px;
    margin-right: 29px;
    .ippt{
    .px2rem(height, 150);
    border-radius: 10px;
}
.sss{
    .px2rem(font-size, 20);
    margin-top: 30px;
    margin-right: 5px;
    }
}
.ti{
    display: flex;
    justify-content: center;
    margin-top: 30px;
    .btn{
        .px2rem(width, 375);
        .px2rem(height, 60);
    }
}
</style>
